<!-- 手机模拟器 -->
<template>
    <div id="mobilePhoneSimulator" v-if="useData().frontmatter.value?.demoShow">
        <iframe class="demo-iframe" :src="useData().frontmatter.value?.demoLink" scrolling="auto"
            frameborder="0"></iframe>
    </div>
</template>

<script setup>
import { useData } from 'vitepress'

console.log(useData())
</script>

<style lang="scss" scoped>
#mobilePhoneSimulator {
    width: 375px;
    height: 812px;
    overflow: hidden;
    background-image: url("/images/iphone13.png");
    background-position: left top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 48px 15px 35px;
    margin-top: 10vh;
    order: 2;
    position: sticky;
    top: 150px;
}

.demo-iframe {
    width: 100%;
    height: 100%;
    border-radius: 0 0 30px 30px;
    overflow: hidden;
}
</style>
